<script setup>

import UNavbar from "@/uni_modules/uview-plus/components/u-navbar/u-navbar.vue";
import {computed, ref} from "vue";
import {onLoad} from "@dcloudio/uni-app";
import {getCurrentInstance} from 'vue'
import {caiwuhesuan, getcaiwuhesuan, getXiaoshoudan, upload} from "@/request/api";
import {timestampToDate} from "@/utils";
import {BASEURL} from "@/request/request";
import {fuhecaiwuhesuan} from "../../request/api";

const {proxy} = getCurrentInstance()
const orderId = ref(0);
const disabled = ref(false);//
const fh = ref(false);//复核
const orderDetail = ref({});//
const userinfo = ref(uni.getStorageSync('userinfo'));//
const dataList = ref([]);
onLoad((query) => {
  orderId.value = query.id;
  fh.value = !!query.fh;
  disabled.value = !!query.disabled;
  getInfo();
  getData();
})
/**
 * {'id':'商品id','chengben':'成本','jiesuanfangshi':'结算方式','maoli':'毛利','huiru_image':'汇入凭证','jiesuan_image':'结算凭证'}
 */
const  issss = ref(true);
const getData = () => {
  getcaiwuhesuan({
    id: orderId.value
  }).then(res => {
    issss.value = !!Number(res.data.goods[0].num1);

    res.data.goods.forEach(item => {
      if (!item.info.length) {
        item.info = [
          {
            'id': item.id,
            'chengben': '',
            'jiesuanfangshi': '',
            'maoli': '',
            'huiru_image': '',
            'cw_remark': '',
            'jiesuan_image': ''
          }
        ]
      }
    })
    dataList.value = res.data.goods;
  })
}
const getInfo = () => {
  getXiaoshoudan({
    id: orderId.value
  }).then(res => {
    orderDetail.value = {...res.data};
  })
}

const create = () => {
  uni.showLoading({
    title: '生成中'
  })
  proxy.createSelectorQuery().select('#view').node().exec(res => {
    const node = res[0].node
    node.takeSnapshot({
      type: 'file',
      format: 'png',
      success: (res) => {
        uni.hideLoading();
        uni.showShareImageMenu({
          style: 'v2',
          path: res.tempFilePath,
        })
      },
      fail(res) {
        console.log("takeSnapshot fail:", res)
      }
    })

  })
}

onLoad(() => {

})
//选择文件
const chooseFile = (index,index2,field) => {
  if (dataList.value[index].info[index2][field] && (disabled.value || fh.value)){
    uni.previewImage({
      current: 0,
      urls: [BASEURL + dataList.value[index].info[index2][field]]
    })
    return;
  }
  console.log(11)
  uni.chooseImage({
    count:1,
    async success({tempFilePaths}) {
      dataList.value[index].info[index2][field] = await upload(tempFilePaths[0]);
    }
  })
}
const addLine = (index,item) => {
  dataList.value[index].info.push({
    'id': item.id,
    'chengben': '',
    'jiesuanfangshi': '',
    'maoli': '',
    'huiru_image': '',
    'jiesuan_image': '',
    'cw_remark': ''
  })
}
const handlerSubmit = () => {
  let info = [];
  dataList.value.forEach(item=>{
    let data = [...item.info]
   info.push({
     id:item.id,
     data:[...item.info]
   })
  })
  console.log(info)
  if (!fh.value){
    caiwuhesuan({
      id:orderId.value,
      info:info
    }).then(()=>{
      uni.showToast({
        title:'操作成功',
        icon:'none'
      });
      setTimeout(()=>{
        uni.navigateBack();
      },1000)
    })
  }else {
    fuhecaiwuhesuan({
      id:orderId.value,
      info:info
    }).then(()=>{
      uni.showToast({
        title:'复核成功',
        icon:'none'
      });
      setTimeout(()=>{
        uni.navigateBack();
      },1000)
    })
  }

}
const prevImage = (url) => {
  uni.previewImage({
    current: 0,
    urls: [BASEURL + url]
  })
}

</script>
<template>
  <view class="document-page">
    <u-navbar placeholder title="财务核算表"></u-navbar>
    <!--    <view class="tip">请横屏查看单据</view>-->

    <scroll-view type="list"  scroll-x class="scroll-y" style="position: relative;">

      <view ref="documentRef" class="document">
        <snapshot id="view" class="intro">

        <text class="title">工商服务业统一收款收据</text>
        <view class="container">
          <view class="member">
            <text>客户名称：{{ orderDetail.mobile }}</text>
            <text>日期：{{ timestampToDate(orderDetail.createtime) }}</text>
          </view>
          <view class="table">
            <view class="header">
              <view class="th1">产品名称</view>
              <view class="th2">包装规格</view>
              <view v-if="!issss" class="th3">产品吨价</view>
              <view v-if="!issss" class="th4">产品吨数</view>
              <view v-if="issss" class="th4">产品箱价</view>
              <view v-if="issss" class="th4">产品箱数</view>
              <view class="th5">金额</view>
              <view class="th6">车间</view>
              <view class="th6">备注</view>

              <view class="th6">汇入凭证</view>
              <view class="th6">成本</view>
              <view class="th6">结算方式</view>
              <view class="th6">毛利</view>
              <view class="th6">结算凭证</view>
              <view class="th6">备注</view>
              <view class="th6"></view>
            </view>
            <view class="header row" v-for="(item,index) of dataList" :key="index">
              <view class="th1">{{ item.name }}</view>
              <view class="th2">{{ item.baozhuangguige }}</view>
              <view  v-if="!issss" class="th3">{{ item.num }}</view>
              <view  v-if="!issss" class="th4">{{ item.price }}</view>
              <view   v-if="issss" class="th3">{{ item.num1 }}</view>
              <view  v-if="issss" class="th4">{{ item.price1 }}</view>
              <view  v-if="!issss" class="th5">{{ item.total }}</view>
              <view  v-if="issss" class="th5">{{ item.total1 }}</view>
              <view class="th6">{{ item.chejian }}</view>
              <view class="th6">{{ item.remark }}</view>
              <view class="inner">
                <view class="bonus" v-for="(item2,index2) of item.info" :key="index2">
                  <view @click="chooseFile(index,index2,'huiru_image')" class="th">
                    <text v-if="!item2.huiru_image">点击上传</text>
                    <image style="height: 40rpx;width: 40rpx;" v-else src="/static/fj.png"></image>
                  </view>   <view class="th">
                    <input type="text" v-model="item2.chengben">
                  </view>
                  <view class="th">
                    <input type="text" v-model="item2.jiesuanfangshi">
                  </view>
                  <view class="th">
                    <input type="number" v-model="item2.maoli">
                  </view>
                  <view @click="chooseFile(index,index2,'jiesuan_image')" class="th">
                    <text v-if="!item2.jiesuan_image">点击上传</text>
                    <image style="height: 40rpx;width: 40rpx;" v-else src="/static/fj.png"></image>
                  </view>
                  <view class="th">
                    <input type="text" v-model="item2.cw_remark">
                  </view>
                </view>
              </view>
              <text @click="addLine(index,item)" class="th6" style="color: #3563FF">加行</text>
            </view>
          </view>
          <view class="member">
            <text>填写人：{{ userinfo.name || '未知' }}</text>
            <text></text>
          </view>
        </view>
        </snapshot>
      </view>

    </scroll-view>

    <view class="submit" v-if="!disabled" @click="handlerSubmit">{{fh?'复核提交':'确认提交'}}</view>
    <view class="submit" v-if="disabled" @click="create">保存</view>
    <view class="safe-area"></view>
  </view>
</template>


<style scoped lang="scss">
.intro{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.document-page {
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  align-items: center;


  .submit {
    width: 597rpx;
    height: 96rpx;
    background: #3563FF;
    border-radius: 48rpx;
    margin-top: 30rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 30rpx;
    color: #FFFFFF;
    line-height: 36rpx;
  }

  .document {
    //width: 3900rpx;
    //height: 1000rpx;
    padding: 70rpx 60rpx;
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0;
    left: 0;
    align-items: center;

    .th1 {
      width: 320rpx;
      height: 76rpx;
    }

    .th2 {
      width: 320rpx;
      height: 76rpx;
    }

    .th3 {
      width: 190rpx;
      height: 76rpx;
    }

    .th4 {
      width: 190rpx;
      height: 76rpx;
    }

    .th5 {
      width: 190rpx;
      height: 76rpx;
    }

    .th6 {
      width: 190rpx;
      height: 76rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      border-right: 1rpx solid #666;

      &:last-child {
        border-right: unset;
      }
    }

    .th {
      min-width: 190rpx;
      height: 76rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      border-right: 1rpx solid #666;
      font-weight: 400;
      font-size: 26rpx;
      color: #222222;

      &:last-child {
        border-right: unset;
      }
    }

    .bonus {
      display: flex;
      border-right: 1rpx solid #666;
      //border-left: 1rpx solid #666;
      border-bottom: 1rpx solid #666;

      > view {
        min-height: 76rpx !important;
      }

      &:last-child {
        border-bottom: unset;
      }
    }
  input{
    text-align: center;
    width: 100%;
  }
    .table {
      margin-top: 25rpx;
      background: #FFFFFF;
      border: 1px solid #666666;


      .header {
        display: flex;
        align-items: center;
        border-bottom: 1rpx solid #666;

        &.row {
          align-items: unset;
          min-height: 76rpx;

          .th1,.th2,.th3,.th4,.th5,.th6 {
            height: auto;
            font-weight: 400;
            flex-shrink: 0;
          }
        }

        &:last-child {
          border-bottom: unset;
        }

        .th1,.th2,.th3,.th4,.th5,.th6 {
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: 500;
          flex-shrink: 0;

          font-size: 26rpx;
          color: #222222;
          border-right: 1rpx solid #666;

          &:last-child {
            border-right: unset;
          }
        }
      }
    }

    .member {
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin-top: 30rpx;
      align-items: center;

      text {
        font-weight: 400;

        font-size: 26rpx;
        color: #222222;
      }
    }

    .title {
      font-weight: bold;
      font-size: 30rpx;
      text-align: center;
      color: #222222;
    }
  }

  .content {
    display: flex;
    flex-direction: column;
    //align-items: center;
    height: 300vh;
    padding: 30rpx 0 30rpx 0;
    background-color: #fff;

  }

  .tip {
    width: 100%;
    padding: 0 30rpx;
    display: flex;
    align-items: center;
    background-color: rgb(245, 245, 245);
    font-weight: 400;
    font-size: 30rpx;
    color: #333333;
    height: 88rpx;
  }
}
</style>
